<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data Show</title>
    <script src="js/jquery-3.3.1.js" type="text/javascript"></script>
    <script src="js/echarts.min.js" type="text/javascript"></script>
    <!-- <script src="js/echarts.js" type="text/javascript"></script> -->
</head>

<body>
    <input type="file" id="files" onchange="onFileImport();">
    <br/>
    <p>数据组数: <span id="lineNums"></span></p>
    <br>
    <div id="chart" style="width: 600; height: 800px;"></div>

    <script>
        let freq = 1000;
        let myChart = echarts.init(document.getElementById('chart'));

        function onFileImport() {
            freq = prompt("输入采样频率: ", "1000");
            if (freq === null) {
                return;
            } else {
                freq = parseInt(freq);
            }

            let file = document.getElementById('files').files[0];
            let reader = new FileReader();
            reader.readAsText(file);
            reader.onload = function () {
                let lines = this.result.split("\n")
                                .filter(function (it) {return it.length > 0})
                                .map(function (it) {return it.trim()});
                $("#lineNums").text(lines.length);
                lines.forEach(function (it) {
                    var items = it.split(",").filter(function (it) {return it.length > 0});
                })
                let groupNums = 0;
                let names = [];
                let xNames = [];
                if (lines.length > 1) {
                    names = lines.shift().split(",").filter(function (it) {return it.length > 0}).map(function (it) {return it.trim()});
                    groupNums = names.length;

                    let groups = [];
                    for (let i=0; i<groupNums; i++) {
                        groups.push([]);
                    }
                    lines.forEach(function (it, index) {
                        it.split(",").filter(function (it) {return it.length > 0})
                          .map(function (it) {return it.trim()})
                          .forEach(function (it, index) {
                            groups[index].push(it);
                          })
                        xNames.push(indexToRelativeTime(index + 1));
                    })
                    
                    let option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                animation: false
                            }
                        },
                        toolbox: {
                            restore: {}
                        },
                        axisPointer: {
                            link: {xAxisIndex: 'all'}
                        },
                        dataZoom: [
                            {
                                show: true,
                                realtime: true,
                                type: 'slider',
                                xAxisIndex: [],
                                startValue: 0,
                                endValue: 999
                            },
                            {
                                type: 'inside',
                                realtime: true,
                                startValue: 0,
                                endValue: 999,
                                xAxisIndex: []
                            }
                        ],
                        legend: {
                            data: names
                        },
                        grid: [],
                        xAxis: [],
                        yAxis: [],
                        series: []
                    };
                    let gridTop = 100 / (groupNums + 1);
                    let hh = 100 / (groupNums + 2);
                    groups.forEach(function (it, index) {
                        let item = {
                            name: names[index],
                            data: it,
                            type: "line",
                            xAxisIndex: index,
                            yAxisIndex: index,
                            hoverAnimation: false
                        };
                        let x = {
                            gridIndex: index,
                            type: 'category',
                            boundaryGap: false,
                            data: xNames,
                            show: index == 0 ? true : false,
                        }
                        let y = {
                            gridIndex: index,
                            name: names[index],
                            type: 'value',
                            scale: true
                        }
                        let g = {
                            top: (gridTop * (index + 1)) + '%',
                            height: hh + '%'
                        }

                        option.grid.push(g);
                        option.series.push(item);
                        option.xAxis.push(x);
                        option.yAxis.push(y);
                        option.dataZoom[0].xAxisIndex.push(index);
                        option.dataZoom[1].xAxisIndex.push(index);
                    });
                    myChart.clear();
                    myChart.setOption(option);
                }
            }
        }

        function indexToRelativeTime(index) {
            let ms = index % freq;
            let sec = 0, min = 0, hour = 0;

            sec = parseInt((index - ms) / freq);
            if (sec >= 60) {
                let t = sec;
                sec = sec % 60;
                min = parseInt((t - sec) / 60);
                if (min >= 60) {
                    t = min;
                    min = min % 60;
                    hour = parseInt((t - min) / 60);
                }
            }

            if (ms < 10) {
                ms = "00" + ms;
            } else if (ms < 100) {
                ms = "0" + ms;
            }
            return `${hour}:${min}:${sec}.${ms}`;
        }
    </script> 
</body>